{{ if and .Site.Params.permanentTopNav .Site.Params.stickyNav }}
<header class="sticky">
{{ else }}
<header>
{{ end }}
    <div class="container">
        <div class="logo">
            <a id="siteBaseUrl" href="{{ .Site.BaseURL | relLangURL }}" class="logo">
                {{ if and (isset .Site.Params "customimage") (ne .Site.Params.customImage "") }}
                <img src="{{ .Site.Params.customImage | relURL }}" alt="">
                {{ else }}
                <img src="https://www.gravatar.com/avatar/{{ md5 .Site.Params.gravatarEMail }}?d=mm&size=200" alt="">
                {{ end }}

                <span class="overlay"><i class="fa {{ .Site.Params.overlayIcon | default "fa-home" }}"></i></span>
            </a>
        </div>
        <div class="titles">
            <h3 class="title"><a
                    href="{{ .Site.BaseURL | relLangURL }}">{{ .Site.Title | default "My cool new blog" }}</a></h3>
            {{ with .Site.Params.Subtitle }}
            <span class="subtitle">{{ . }}</span>
            {{ end }}
        </div>

        {{ if and (gt .Site.Languages 1) (.Site.Params.showHeaderLanguageChooser | default true) }}
        {{- $.Scratch.Set "language" .Language -}}
        <div class="languages">
        {{ range $.Site.Home.AllTranslations }}
            {{ if eq ($.Scratch.Get "language") .Language }}
                <a href="{{ .Permalink }}" class="active">{{ .Language }}</a>
            {{ else }}
                <a href="{{ .Permalink }}">{{ .Language }}</a>
            {{ end }}
        {{ end }}
        </div>
        {{ end }}

        {{ if .Site.Params.permanentTopNav }}
        <div class="toggler permanentTopNav">
            {{ else }}
            <div class="toggler">
                {{ end }}
                <i class="fa fa-bars" aria-hidden="true"></i>
            </div>
        </div>
</header>
